﻿<%@ Page Title="" Language="C#" MasterPageFile="~/DataTables.master" AutoEventWireup="true" CodeBehind="DataTables.aspx.cs" Inherits="HQ.Web.DataTables" %>
<asp:Content ID="Content1" ContentPlaceHolderID="DataTablesHead" runat="server">
    <link href="Scripts/datatables/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <link href="Scripts/JQueryUI/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet"
        type="text/css" />
    
    <script src="Scripts/datatables/js/jquery.dataTables.js" type="text/javascript"></script>
    <style type="text/css">
        .dataTable thead tr{ background:#EDEDED;}
        
        .dataTables_wrapper
        {
        	  background: none repeat scroll 0 0 #D0D0D0;
        	  <%--add 圆角控制--%>
        	  border-radius: 5px 5px 5px 5px;
              box-shadow: 2px 2px 6px #666666;
        }
        .dataTables_info {
            padding-top: 0;
        }
        .dataTables_paginate {
            padding-top: 0;
        }
        .css_right {
            float: right;
        }
        #example_wrapper .fg-toolbar {
            font-size: 0.8em;
        }
        #theme_links span {
            float: left;
            padding: 2px 10px;
        }
        #example_wrapper {
            border-radius: 5px 5px 5px 5px;
            box-shadow: 2px 2px 6px #666666;
        }
        #example tbody {
            border-left: 1px solid #AAAAAA;
            border-right: 1px solid #AAAAAA;
        }
        #example thead th:first-child {
            /*border-left: 1px solid #AAAAAA;*/
        }
        #example thead th:last-child {
            /*border-right: 1px solid #AAAAAA;*/
        }
        
        table.dataTable thead th {
            border-bottom: 1px solid black;
            cursor: pointer;
            font-weight: bold;
            padding: 3px 18px 3px 10px;
        }
        .ui-buttonset .ui-button{ margin-right:auto; padding-left:2px; padding-right:2px;}
       
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="DataTablesBody" runat="server">
<div class="w_fluid">
     <div class="w_block">
          <div class="w_blockTitle">1.介绍和说明</div>
          <div class="w_text">
          <pre>
DataTables是一款基于JQuery的强大的表格展示控件，这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持
任何HTML表格。主要特点：
    自动分页处理 
    即时表格数据过滤 
    数据排序以及数据类型自动检测 
    自动处理列宽度 
    可通过CSS定制样式 
    支持隐藏列 
    易用 
    可扩展性和灵活性 
    国际化 
    动态创建表格 
    免费的 
          </pre>
          </div>
     </div>
     <div class="w_block">
          <div class="w_blockTitle">2.展示</div>
          <div class="w_text">
          <p class=" w_sectionTitle">第一个：DOM结构的数据源,就是页面上的table，使用了默认的Previous和Next 两个button的分页控件，前台js实现的排序等功能。</p>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th>这是页面原始数据</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
<p>Code:</p>
<pre>
$(function () {
$("#example").DataTable({
    "bPaginate": true,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": true,
    "bInfo": false,
    "bAutoWidth": false
    //"aaSorting": [[4, "desc"]],
    //"aoColumnDefs": [{ "bSearchable": false, "bVisible": false, "aTargets": [2] }, 
    //{ "bVisible": false, "aTargets": [3]}]
});
        
});
</pre>
<br />   
<div class="clear"></div>
<p class=" w_sectionTitle">第二个：后台数据源，自定义列名等功能</p>
<table id="Table2"></table>

<p>Code:</p>
<pre>
$(
function(){
$("#Table2").DataTable({
        "bPaginate": true,
        "bSort": false,
        "sAjaxSource": 'Handlers/TableDemoHandler.ashx',
        "bProcessing": true,
        "bServerSide": false,
        "aoColumnDefs": [//aoColumnDefs   (aoColumns 可用null)    
            {"aTargets": [0], "sTitle": "aaDataList", "aDataSort": [0], "asSorting": ["asc"], 
            "bSearchable": false  },//"bVisible": false  
            {"aTargets": [1], "sTitle": "郑勇1", "aDataSort": [1], "asSorting": ["desc", "asc", "asc"],
             "bSearchable": false },
            { "aTargets": [2], "sTitle": "郑勇2", "aDataSort": [2], "asSorting": ["asc"], "bSortable": false,
             "bSearchable": false },
            { "aTargets": [4], "sTitle": "第五列", "aDataSort": [2], "asSorting": ["asc"], "bSortable": false,
             "bSearchable": false },
            { "aTargets": [3], "sTitle": "郑勇3", "aDataSort": [3], "asSorting": ["asc"], "bSortable": false,
             "bSearchable": false }
            ],
        "fnServerData": fnServerDataDefault
});
}
);
</pre>
<br />     
                      <%--必须是table容器--%>
<p class=" w_sectionTitle">第三种：比较复杂的DataTable</p>
<table id="myDataTable">
</table>
<p>Code:</p>
            <pre>
$(document).ready(function () {
    $('#myDataTable').dataTable({
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "bJQueryUI": true,
        "bLengthChange": false,
        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        //"bStateSave": true,
        "bFilter": true,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": false,
        "aaSorting": [[3, "desc"]],
        "bProcessing": false,
        "bServerSide": true,
        "sServerMethod": "POST",
        "sAjaxSource": 'Handlers/TableDemoHandler.ashx',
        //"sAjaxDataProp": "aaDataStr",
        //"iDeferLoading": 57 ,
        "iDisplayStart": 0,
        "aoColumnDefs": [//aoColumnDefs   (aoColumns 可用null)    
                {"aTargets": [0], "sTitle": "aaDataStr", "aDataSort": [0], "asSorting": ["asc"], "bSearchable": false }, //"bVisible": false  
                {"aTargets": [1], "sTitle": "plan", "aDataSort": [1], "asSorting": ["desc", "asc", "asc"], "bSearchable": false },
        //                {"aTargets": [1], "mDataProp": function (aData, type, val) {                   
        //                    return aData[1];
        //                    }
        //                },
        //{ "aTargets": [2], "sTitle": "name", "aDataSort": [2], "asSorting": ["asc"], "bSortable": false, "bSearchable": false },
                {"aTargets": [2], "sTitle": "name", "fnRender": function (oObj, sVal) {
                    return "< a href=###>" + sVal + '< /a>' + oObj.aData[3];
                }
            },
                { "aTargets": [4], "sTitle": "满足一样的列数", "aDataSort": [4], "asSorting": ["desc", "asc", "asc"], "bSearchable": false },
                { "aTargets": [3], "sTitle": "owner", "aDataSort": [3], "asSorting": ["asc"], "bSortable": false, "bSearchable": false }
                ],
                "fnServerData": fnServerDataDefaultWithDate

    });
});
            </pre>


          </div>
     </div>
     <div class="w_block">
          <div class="w_blockTitle">3.使用的代码</div>
          <div class="w_text">
          
          </div>
     </div>
     <div class="w_block">
          <div class="w_blockTitle">4.注意事项</div>
          <div class="w_text"></div>
     </div>
     <div class="w_block">
          <div class="w_blockTitle">5.参考资料</div>
          <div class="w_text">
          <p>
          有关这个空间的详细信息请参见官方网站：
          http://www.datatables.net/examples/
          </p>
          </div>
     </div>
     <div class="w_block">
          <div class="w_blockTitle">6.意见反馈</div>
          <div class="w_text">
          <div><a href="About.aspx">更多DataTables的例子</a></div>
          </div>
     </div>
</div>




<script type="text/javascript">
    $(function () {
        $("#example").DataTable({
            "bPaginate": true,
            "bLengthChange": false,
            "bFilter": true,
            "bSort": true,
            "bInfo": false,
            "bAutoWidth": false
            //"aaSorting": [[4, "desc"]],
            //"aoColumnDefs": [{ "bSearchable": false, "bVisible": false, "aTargets": [2] }, 
            //{ "bVisible": false, "aTargets": [3]}]
        });
        
     });

$(
function(){
$("#Table2").DataTable({
        "bPaginate": true,
        "bSort": false,
        "sAjaxSource": 'Handlers/TableDemoHandler.ashx',
        "bProcessing": true,
        "bServerSide": true,
        "aoColumns": [//aoColumnDefs   (aoColumns 可用null)    
            {"aTargets": [0], "sTitle": "aaDataList", "aDataSort": [0], "asSorting": ["asc"], "bSearchable": false  },//"bVisible": false  
            {"aTargets": [1], "sTitle": "郑勇1", "aDataSort": [1], "asSorting": ["desc", "asc", "asc"], "bSearchable": false },
            { "aTargets": [2], "sTitle": "郑勇2", "aDataSort": [2], "asSorting": ["asc"], "bSortable": false, "bSearchable": false },
            { "aTargets": [4], "sTitle": "第五列", "aDataSort": [2], "asSorting": ["asc"], "bSortable": false, "bSearchable": false },
            { "aTargets": [3], "sTitle": "郑勇3", "aDataSort": [3], "asSorting": ["asc"], "bSortable": false, "bSearchable": false }
            ],
        "fnServerData": fnServerDataDefaultWithDate
});
}
);

$(document).ready(function () {
    $('#myDataTable').dataTable({
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "bJQueryUI": true,
        "bLengthChange": false,
        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        //"bStateSave": true,
        "bFilter": true,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": false,
        "aaSorting": [[3, "desc"]],
        "bProcessing": false,
        "bServerSide": true,
        "sServerMethod": "POST",
        "sAjaxSource": 'Handlers/TableDemoHandler.ashx',
        //"sAjaxDataProp": "aaDataStr",
        //"iDeferLoading": 57 ,
        "iDisplayStart": 0,
        "aoColumnDefs": [//aoColumnDefs   (aoColumns 可用null)    
                {"aTargets": [0], "sTitle": "aaDataStr", "aDataSort": [0], "asSorting": ["asc"], "bSearchable": false }, //"bVisible": false  
                {"aTargets": [1], "sTitle": "plan", "aDataSort": [1], "asSorting": ["desc", "asc", "asc"], "bSearchable": false },
        //                {"aTargets": [1], "mDataProp": function (aData, type, val) {                   
        //                    return aData[1];
        //                    }
        //                },
        //{ "aTargets": [2], "sTitle": "name", "aDataSort": [2], "asSorting": ["asc"], "bSortable": false, "bSearchable": false },
                {"aTargets": [2], "sTitle": "name", "fnRender": function (oObj, sVal) {
                    return "<a href=###>" + sVal + '</a>' + oObj.aData[3];
                }
            },
                { "aTargets": [4], "sTitle": "满足一样的列数", "aDataSort": [4], "asSorting": ["desc", "asc", "asc"], "bSearchable": false },
                { "aTargets": [3], "sTitle": "owner", "aDataSort": [3], "asSorting": ["asc"], "bSortable": false, "bSearchable": false }
                ],

        //// 属性大小写问题，弄出很多奇怪的错误。
        //             "aoColumns": [//null,null,null,null
        //                { "atargets": [0], "stitle": "yongzheng", "aDataSort": [0], "asSorting": ["asc"], "bSortable": false, "bsearchable": false },
        //                { "atargets": [1], "stitle": "plan", "aDataSort": [1], "asSorting": ["asc"], "bSortable": false, "bsearchable": false },
        //                { "atargets": [2], "stitle": "name", "aDataSort": [2], "asSorting": ["asc"], "bSortable": false, "bsearchable": false },
        //                { "atargets": [3], "stitle": "owner", "aDataSort": [3], "asSorting": ["asc"], "bSortable": false, "bsearchable": false }
        //                ],


        //"sAjaxSource":"http://www.datatables.net/release-datatables/examples/server_side/scripts/server_processing.php"
        //"sAjaxSource": "../server_side/scripts/server_processing.php"

            "fnServerData": fnServerDataDefaultWithDate

    });
});

</script>
</asp:Content>
